<template>
  <div class="login">
    <div class="blank-bgc">
      <img src="@/assets/images/login/small-bgc.png" alt="" />
      <div class="wrap">
        <h3>环境服务云助手管理系统</h3>
        <div class="ipt-wrap">
          <div class="user">
            <img src="@/assets/images/login/user.png" alt="" />
            <el-input placeholder="用户名" v-model="params.mobile"></el-input>
          </div>
          <div class="psd">
            <img src="@/assets/images/login/psd.png" alt="" />
            <el-input placeholder="密码" type="password" v-model="params.password"></el-input>
          </div>
          <div class="code-ipt">
            <img class="code" src="@/assets/images/login/code.png" alt="" />
            <el-input
              placeholder="请输入验证码"
              v-model="params.code"
              @keydown.enter="login"
            ></el-input>
            <img class="auth-code" @click="getCode" :src="imgCodeUrl" alt="" />
          </div>
          <button @click="login">登录</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import { useRouter, useRoute } from "vue-router";
import useStore from "@/stores/modules/home.ts";

import ElMessage from "@/components/ElMessage.js";
import http from "@http";
let $store = useStore();
let params = reactive<Object>({
  mobile: "", //15537652177
  password: "", //123
  code: "",
});
onActivated(() => {
  params.password = "";
  params.code = "";
});
onMounted(() => {});
let imgCode = ref("");
let imgCodeUrl = ref("");
params.mobile = localStorage.getItem("wasteMobile") || "";
let getCode = () => {
  http({ url: "/admPCVerifycode/getcodeimage" }).then((res) => {
    console.log(res, "res");
    if (res.code == 0) {
      imgCode.value = res.data.code;
      imgCodeUrl.value = res.data.image;
    }
  });
};
getCode();

let code = ref("/src/assets/images/login/auto-code.png");
let $router = useRouter();
let $route = useRoute();

let login = () => {
  // $router.push("/home");
  // return
  console.log($route.query.redirect, "$route123");
  if (params.code != imgCode.value) {
    ElMessage({ msg: "验证码错误", type: "error" });
    return;
  }
  http({ url: "/pclogin", data: params }).then((res) => {
    if (res.code == 0) {
      $store.setUserInfoMsg(res.data).then((res) => {
        if (res) {
          localStorage.setItem("wasteMobile", params.mobile);
          ElMessage({ msg: "登录成功" });
          if ($route.query.redirect) {
            $router.push($route.query.redirect);
          } else {
            $router.push("/home");
          }
        }
      });
    }
  });
  // router.push("/home");
};
</script>
<style scoped lang="scss">
.login {
  width: 100vw;
  height: 100vh;
  background: url("@/assets/images/login/big-bgc.png") no-repeat;
  background-size: 100% 100%;
  /* position: relative; */
  display: flex;
  justify-content: center;
  align-items: center;
  .blank-bgc {
    width: 1458px;
    height: 821px;
    background: #ffffff;
    border-radius: 40px;
    display: flex;
    justify-content: space-between;
    padding: 74px 0 98px 52px;
    img {
      width: 785px;
      height: 649px;
    }
    .wrap {
      flex: 1;
      margin-left: 69px;
      padding-top: 83px;

      h3 {
        width: 463px;
        height: 40px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        font-size: 42px;
        color: #333333;
      }
      .ipt-wrap {
        margin-top: 81px;
        .user,
        .psd {
          width: 399px;
          height: 54px;
          background: #ffffff;
          border-radius: 10px;
          border: 1px solid #999999;
          display: flex;
          align-items: center;
          padding-left: 17px;
          img {
            width: 22px;
            height: 24px;
          }
        }
        .psd,
        .code-ipt {
          margin-top: 25px;
        }
        button {
          margin-top: 66px;
          width: 399px;
          height: 52px;
          background: #0874fa;
          border-radius: 26px;

          font-weight: 400;
          font-size: 20px;
          color: #ffffff;
        }
        .code-ipt {
          display: flex;
          align-items: center;
          padding-left: 17px;
          width: 399px;
          height: 54px;
          background: #ffffff;
          border-radius: 10px;
          border: 1px solid #999999;
          display: flex;
          align-items: center;
          padding-left: 17px;
          .code {
            width: 22px;
            height: 24px;
          }
          .auth-code {
            width: 100px;
            height: 50px;
            border-radius: 0 4px 4px 0;
            cursor: pointer;
          }
        }
      }
    }
  }
  :deep(.el-input) {
    height: 43px;
    font-size: 19px;
  }
  :deep(.el-input__wrapper) {
    width: 100%;
    height: 100%;
    background-color: transparent !important;
    padding-left: 15px !important;
    box-shadow: none !important;
  }
  :deep(.el-input__inner::placeholder) {
    width: 59px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 20px;
    color: #999999;
  }

  :deep(.el-input) {
    background-color: transparent !important;
  }
  :deep(.el-input__wrapper) {
    border: none !important;
    /* height: 48px !important; */
  }
}
</style>
